<template>
	<view class="" style="background-color: #fff;">
		<view class="bgIndex"  :style="{ '--bg-image': `url(${backBg})` }" >
			<view :style="{ height: heightSystemss + 'rpx' }"></view>
			<!-- <view class="flex-start-center" @click="NavBackFn()">
				<uni-icons type="left" color="#fff" size="15"></uni-icons>
				<view style="color: #fff;" class="">
					个人中心
				</view>
			</view> -->
			<view style="height: 100rpx;"></view>
			<view class="flex-between padding_20rpx_0 ">
				<view class="flex-start-center">
					<view class="orderLocation">
						<image class="avatar" :src="userInfoObject.avatar" mode=""></image>

						</image>

					</view>
					<view class="margin-left_16rpx flex-columns" style="height: 104rpx;">
						<view class="flex-start-center">
							<view class="font-overflow font-weight "
								style="max-width:300rpx;color: rgb(255, 255, 255);margin-right: 8rpx;">
								{{userInfoObject.nickname}}


							</view>
							<view :class="userInfoObject.level_id==1? 'regularUser flex' : 'vipUser flex'">
								<image v-if="userInfoObject.level_id!=1" class="crown" :src="crown" mode=""></image>
								<text>{{userInfoObject.level_id==1?userInfoObject.level_name:'vip用户'}}</text>
							</view>
						</view>



						<view class="flex-start-center">

							<text v-if="!(userInfoObject.level_id==1)"
								style="color: rgb(179, 156, 122);">到期时间:{{userInfoObject.vip_end_time}}</text>
							<view class="cardExchange flex" @click="cardExchangeFn()">
								<text>卡密兑换</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-columns-center-bet">
					<!-- 	<view>
						<image class="wximg" :src="Vector" mode=""></image>
					</view> -->
					<view class="chat flex" @click="purchaseRecords()">

						<text style="margin-bottom: 5rpx;color: #fff;">购买记录</text>
						<uni-icons color='#fff' type="right" size="15"></uni-icons>
					</view>
				</view>
			</view>

		</view>
		<view class="centerList">
			<image class="privilege flex" :src="title" mode="aspectFit"></image>
			<view class="imageList">
				<scroll-view @scrolltolower="nextPage" scroll-view scroll-with-animation='true'
					 class="scroll-view_H" scroll-x="true">
					<view id="im_0" class="bottom"></view>
					<!-- <block v-for="(item,index) in imageList" :key="index"> -->
					<view class="scroll-view-item_H  flex-column">

						<view class="rechargePrice flex-start-center">
							<block v-for="(item,index) in onlineRechargeList" :key="index">

								<view @click="switchRechargePrice(index,item)"
									:class="['flex-column',currentIndex == index?'container':'container-noActive']">
									<view class="preferential flex">
										<text>{{item.effective_time+'天'?item.effective_time+'天':'超值推荐'}}</text>

									</view>
									<view class="margin-top_16rpx">
										<text style="color: #644E3A;font-size: 32rpx;">{{item.name}}</text>
									</view>
									<view :class="[currentIndex == index?'price':'price-noActive']">

										<text style="color: #F24451;font-size: 40rpx;">{{totelName(item.price)}}</text>

									</view>


								</view>

							</block>
						</view>
					</view>

					<!-- </block> -->

				</scroll-view>

			</view>
			<view class="margin_25rpx_0" style="color: #666666;">
				<text>{{onlineRechargeList[currentIndex].desc}}</text>
			</view>


			<rich-parser :html="basicConfiguration.level_desc" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la"
				lazy-load ref="article" selectable show-with-animation use-anchor lazyLoad="true"></rich-parser>


			<radio-group name="apply" class="radioText  flex-align-center" :class="'animation-' + animation"
				@click="checkedOn2()">
				<label @click.stop="checkedOn2()">
					<radio :checked="agreeChecked" value="1" color="rgb(42, 137, 255)"
						style="transform:scale(0.8);padding-left:12rpx;" />
				</label>
				<view class="agree flex-align-center">
					<text>我已阅读并同意</text>
					<text @click.stop="toAgreement()">《会员协议》</text>
				</view>
			</radio-group>
			<view class="confirmRecharge flex" @click="confirmRechargeFn()">
				确认协议并立即开通
			</view>
			<view style="height: 25rpx;" class="">

			</view>

		</view>
		<sunui-popup ref="myPackagePopups">
			<template v-slot:content>

				<view class="flex-column ">
					<scroll-view :scroll-y="true" style="height: 1000rpx;">
						<view style="text-align: center; margin-bottom: 20rpx;">
							开通会员协议
						</view>
						<rich-parser :html="basicConfiguration.user_agreement"
							domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" lazy-load ref="article" selectable
							show-with-animation use-anchor lazyLoad="true"></rich-parser>
						<!-- 	<view v-html="transaction_rule" class="">
		
						</view> -->
					</scroll-view>
				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class=" ">

					<view style="text-align: center; margin: 15rpx 0 30rpx">
						会员激活卡密
					</view>



					<view class="">
						<view class="font-weight">
							<text>会员卡密</text>
						</view>
						<view class="edit flex-start-center padding-left_30rpx margin_20rpx_0">
							<input class="uni-input" v-model="round_str" placeholder="请输入卡密" />


						</view>
						<view class="">
							<text>注:</text><text style="color: #8E2CF2;">请联系管理员获取卡密</text>
						</view>
					</view>
					<view class="confirm flex" @click="ObtainCardSecretFn()">
						确定
					</view>

				</view>

			</template>
		</sunui-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				backBg:this.$img.backBg,
				title: this.$img.title,
				crown: this.$img.crown,
				agreeChecked: false,
				Vector: this.$img.Vector,
				round_str: null,
				userInfo: uni.getStorageSync("userInfo"),
				userInfoObject: null,
				currentIndex: 0,
				heightSystemss: 0,
				imageList: [{
					image: '../../static/第一行所有图标/矩形 176.png',

				}, {
					image: '../../static/第一行所有图标/矩形 176.png',

				}, {
					image: '../../static/第一行所有图标/矩形 176.png',

				}, {
					image: '../../static/第一行所有图标/矩形 176.png',

				}],
				queryPage: {
					limit: 10,
					page: 1

				},
				total: 10,
				onlineRechargeList: [],
				basicConfiguration: null,
				animation: '',
				vipId: '',
				isSuccess:false

			}
		},
		onLoad() {

			// this.createdgetSystemInfo()
			this.userInfoFn()
			this.userLevelFn()
			this.basicConfigurationFn()
		},
		onShow() {
			
			this.$at.releaseKey('submitMember');
			this.$at.releaseKey('submit');
		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {

						var numberStr = num.toString();
						return numberStr;
						// num.toString();


					}
				};
			}
		},
		methods: {
			purchaseRecords() {
				this.$sun.navGo('/pagesA/personalCenter/purchaseRecords')
			},
			NavBackFn() {
				this.$sun.navBack()
			},
			async confirmRechargeFn() {
				this.$at.uniDoFunc({
					key: 'submitMember',
					success: async () => {
						this.$at.lockKey('submitMember');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.agreeChecked) {
							this.$sun.toast('请先阅读并同意《会员卡服务协议》', 'none');
							this.animation = 'shake';
							setTimeout(() => {
								this.animation = '';
							}, 1300);
							this.$at.releaseKey('submitMember');
						} else {

							const result = await this.$http.post({
								url: this.$api.buyVip,
								data: {
									id: this.vipId,
									pay_type: 2

								},
								headers: {
									'Authorization': this.userInfo.token
								}

							})


							if (result.code == 0) {

								let pay =result.data
								this.$at.releaseKey('submitMember');
								await this.$wx.config({
									debug: false,
									appId: pay.appid,
									timestamp: pay.timeStamp,
									nonceStr: pay.nonceStr,
									paySign: pay.paySign,
									jsApiList: ['chooseWXPay']
								});
								await this.$wx.chooseWXPay({
									timestamp: pay.timeStamp,
									nonceStr: pay.nonceStr,
									package: pay.package,
									signType: pay.signType,
									paySign: pay.paySign,
									appId: pay.appid,
									
									success: async res => {
										this.isSuccess = true;
										this.$at.releaseKey('submitMember');
										// this.$sun.toast('进入支付成功111');
										
										// this.$sun.navRe('/pages/user/order/order', {
										// 	id: 1
										// });
										// 后台修改状态，则不需要重复调用接口
										// this.wxOrder();
									},
									fail: async err => {
										this.$sun.toast('取消了支付','none');
										this.$at.releaseKey('submitMember');
										
									},
									complete: async res => {
										if (this.isSuccess == true) {
											this.$sun.toast('进入支付成功回调===========','none');
											console.log('进入支付成功回调===========', res);
								            this.userInfoFn()
											// this.$sun.toast('进入支付成功回调'+res);
										} else {
											this.$sun.toast('取消了支付','none');
											this.$at.releaseKey('submitMember');
											
										}
										console.log('进入测试回调===========', res);
									}
								});
								
								
								

								this.$at.releaseKey('submitMember');
							} else {
								this.$sun.toast(result.message, 'none')
								this.$at.releaseKey('submitMember');
							}

						}
					}
				});



			},
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data

				}
			},
			toAgreement() {
				this.$refs.myPackagePopups.show({
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:20rpx',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			},
			// 获取卡密
			ObtainCardSecretFn() {
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.round_str) {
							this.$sun.toast("请填写卡密", 'none')
							this.$at.releaseKey('submit');
						} else {
							console.log(this.form)


							const result = await this.$http.post({
								url: this.$api.exchangeVip,
								data: {
									round_str: this.round_str

								},
								headers: {
									'Authorization': this.userInfo.token
								}

							})
							if (result.code == 0) {

								this.$sun.toast(result.message, 'none')
								this.round_str=''
								this.$refs.myPackagePopup.close()

								this.userInfoFn()
								this.$at.releaseKey('submit');
							} else {
								this.$sun.toast(result.message, 'none')
								this.$at.releaseKey('submit');
							}


						}
					}
				});
			},
			checkedOn2(e) {
				this.agreeChecked = !this.agreeChecked
			},
			cardExchangeFn() {
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:20rpx',
					bottomClose: false,
					shadeClose: true,
					topclose: true
				});
			},
			async userLevelFn() {
				const result = await this.$http.post({
					url: this.$api.userLevel,
					data: {
						page: 1,
						limit: 1000,




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);

					this.onlineRechargeList = result.data

					if (result.data.length) {
						this.vipId = result.data[0].id
					}

				}
			},
			async userInfoFn() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);
					this.userInfoObject = result.data


				}
			},
			switchRechargePrice(index, item) {
				console.log(item)
				this.vipId = item.id
				this.currentIndex = index


			},
			nextPage() {
				// console.log(111)
				if (this.queryPage.limit * this.queryPage.page >= this.total) {
					return this.$sun.toast('亲 没有更多了~', 'none')
				} else {
					this.queryPage.page += 1
					// this.init()
				}
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.edit {

		height: 88rpx;
		background: rgb(246, 248, 255);
		border-radius: 20rpx;


	}

	.confirm {
		margin-top: 40rpx;
		height: 104rpx;
		border-radius: 200rpx;
		color: #fff;
		background: linear-gradient(253.79deg, rgb(234, 80, 235) 14.061%, rgb(136, 42, 243) 99.748%);
	}

	.bgIndex {
		position: relative;
		padding: 23rpx;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		// background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-15/1912f202406151635485737.png');

		height: 407rpx;

		.orderLocation {
			position: relative;

			.fans {
				width: 68rpx;
				height: 36rpx;
				color: rgb(81, 169, 255);
				background: rgb(210, 242, 255);
			}


			.follow {
				width: 68rpx;
				height: 36rpx;
				color: rgb(182, 32, 224);
				background: rgb(247, 219, 255);
			}

			.avatar {
				width: 61px;
				height: 61px;
				border-radius: 50%;
			}

			.orderImg {
				width: 90px;
				height: 90px;
				border-radius: 20rpx;

			}

			.orderStatusImg {
				position: absolute;
				left: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				color: #fff;
				background: rgb(224, 32, 32);
				z-index: 999;
			}

			.orderStatusImged {
				position: absolute;
				left: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				color: #fff;
				border-radius: 16rpx 0rpx 16rpx 0rpx;

				background: rgb(0, 0, 0);
				z-index: 999;
			}
		}

		.cardExchange {
			width: 120rpx;
			height: 44rpx;
			box-sizing: border-box;
			color: #fff;
			border: 2rpx solid rgb(255, 255, 255);
			border-radius: 12rpx;
			margin-left: 10rpx;

		}

		.vipUser {
			background-color: rgb(230, 185, 102);
			color: rgb(158, 98, 5);
			// width: 72px;
			height: 18px;
			padding: 8rpx;

			.crown {
				width: 30.3rpx;
				height: 29.36rpx;
				margin-right: 5rpx;
			}
		}

		.regularUser {
			background-color: rgb(134, 134, 134);
			color: #fff;
			// width: 72px;
			height: 18px;
			padding: 8rpx;

			.crown {
				width: 30.3rpx;
				height: 29.36rpx;
				margin-right: 5rpx;
			}
		}

		.wximg {
			width: 67.02rpx;
			height: 54.86rpx;
		}
	}

	.centerList {

		/* 隐私协议 start */
		.radioText {
			z-index: 99;
			position: fixed;
			bottom: 192rpx;
			margin: 38rpx 0;
			background-color: #fff;
		}

		.agree {
			color: #666;

			text {
				color: #1890ff;
				// color: #19c866;
			}
		}

		.animation {
			width: 10rem;
			height: 2rem;
			background: #ffffff;
			margin-top: 0.5rem;
		}

		.animation-shake {
			animation: shake 0.3s !important;
		}

		@keyframes shake {

			0%,
			100% {
				transform: translateX(0);
			}

			10% {
				transform: translateX(-9px);
			}

			20% {
				transform: translateX(8px);
			}

			30% {
				transform: translateX(-7px);
			}

			40% {
				transform: translateX(6px);
			}

			50% {
				transform: translateX(-5px);
			}

			60% {
				transform: translateX(4px);
			}

			70% {
				transform: translateX(-3px);
			}

			80% {
				transform: translateX(2px);
			}

			90% {
				transform: translateX(-1px);
			}
		}

		/* 隐私协议 end */
		.confirmRecharge {
			z-index: 99;
			position: fixed; 
			bottom: 90rpx;
			width: 708rpx;
			height: 104rpx;
			border-radius: 102rpx;
			color: #fff;
		
		
			background: linear-gradient(99.09deg, #619FFFFF 0.149%, #0D6CFEFF 99.898%);
		}

		margin-top: -35rpx;
		position: relative;
		padding: 0 22rpx;



		border-radius: 35rpx;
		background: rgb(255, 255, 255);

		.privilege {

			padding-top: 50rpx;
			height: 50rpx;
		}

		.imageList {
			margin: 18rpx 0 0rpx 0;

			.like {
				width: 36.26rpx;
				height: 36.26rpx;

			}

			.fixedImgBlue {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				box-shadow: 0px 0px 8px 2px rgba(47, 204, 254, 0.37);
			}

			.fixedImgPink {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				box-shadow: 0px 0px 7px 3px rgba(251, 70, 148, 0.3);
			}

			.fixedImgYellow {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				box-shadow: 0px 1px 6px 4px rgba(252, 186, 0, 0.17);
			}

			.fixedBtnImg {
				width: 335.38rpx;
				height: 124rpx;
			}

			.scroll-Y {
				height: 300rpx;
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;

			}

			.uni-bg-red {
				background-color: red;
			}

			.uni-bg-green {
				background-color: green;
			}

			.uni-bg-blue {
				background-color: blue;
			}

			.scroll-view-item {
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
			}

			.scroll-view-item_H {
				display: inline-block;
				margin-right: 10rpx;

				text-align: center;
				font-size: 36rpx;

				.albumIcon {
					width: 216rpx;
					height: 216rpx;
				}

				.release {

					width: 90rpx;
					height: 40rpx;
					line-height: 36rpx;
					;
					margin: auto;
					font-size: 20rpx;
					border-radius: 4rpx;
					border: 2rpx solid #1E6CEB;
					color: #FFF;
					background: #1E6CEB;
				}

				.rechargePrice {
					margin-top: 40rpx;

					.masonry {
						width: 16px;
						height: 16px;
					}

					.container {

						margin: 0 30rpx 20rpx 0;

						width: 210rpx;
						height: 193.2rpx;
						box-sizing: border-box;
						border: 2rpx solid rgb(255, 57, 72);
						border-radius: 10px;
						background: linear-gradient(180.00deg, rgb(254, 222, 207), rgba(255, 242, 223, 0) 100%);

						.preferential {
							align-self: flex-start;
							border-radius: 20rpx 0rpx 20rpx 0rpx;
							color: rgb(255, 255, 255);

							font-size: 20rpx;
							font-weight: 400;
							background: rgb(252, 59, 72);
							width: 114rpx;
							height: 48rpx;
							margin-top: -22rpx;



						}
					}

					// .container:nth-child(3n) {
					// 	margin-right: 0;
					// }

					.container-noActive {

						margin: 0 30rpx 20rpx 0;

						width: 210rpx;
						height: 193.2rpx;
						box-sizing: border-box;
						border: 2rpx solid rgb(234, 234, 234);
						border-radius: 20rpx;

						background: #fff;

						.preferential {
							align-self: flex-start;
							border-radius: 20rpx 0rpx 20rpx 0rpx;


							color: rgb(255, 255, 255);

							font-size: 20rpx;
							font-weight: 400;
							background: rgb(252, 59, 72);
							width: 114rpx;
							height: 48rpx;
							margin-top: -22rpx;


						}
					}

					// .container-noActive:nth-child(3n) {
					// 	margin-right: 0;
					// }

					.price {
						color: rgb(122, 85, 32);

						font-size: 50rpx;
						font-weight: 700;
					}

					.price-noActive {
						color: rgb(56, 56, 56);

						font-size: 50rpx;
						font-weight: 700;
					}
				}
			}


		}
	}
</style>